<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/paint-friend.css">
    <link rel="stylesheet" href="css/index.css"/>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/iconfont.css"/>
    <script src="js/paint-friend.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/iconfont.js"></script>
    <script type="text/javascript" src="/webjars/vue/2.6.10/dist/vue.js"></script>
    <script type="text/javascript" src="/webjars/axios/0.19.0/dist/axios.js"></script>
    <script type="text/javascript" src="/webjars/jquery/3.4.1/jquery.js"></script>
    <script type="text/javascript" src="/webjars/jquery-cookie/1.4.1-1/jquery.cookie.js"></script>
    <style type="text/css">
        body {
            background: #f6f9fa;
        }

        .nav > li > a {
            padding: 4px 5px;
        }

        header {
            background: white;
            height: 50px;
        }

        #ul {
            margin-top: 13px;
        }

        #ul > li > a {
            color: black;
            font-size: 10px;
        }

        .span {
            margin: -8px;
            background: white;
            margin-top: -4px;
        }

        #span {
            color: #5BC0DE;
        }

        .nav > li > a:hover {
            background: white;
        }

        #sc {
            width: 200%;
            background: #f4f4f4;
        }

        #button {
            margin-left: 147px;

        }

        #button > span {
            color: #999;
        }

        #login {
            margin-top: 6px;
        }

        #img {
            margin-top: 9px;
        }

        #li {
            width: 68px;
            height: 57px;
            margin-top: -16px;
            margin-left: 13px;
            background: #f45a8d;
            border-radius: 5px;
        }

        #a {
            text-align: center;
            margin-top: 17px;
            background: #f45a8d;
        }

        .sc2 {
            width: 300px;
            margin-left: 72px;
            height: 40px;
        }

        .sc3 {
            width: 190px;
            margin-left: 72px;
            height: 40px;
        }

        .button2 {
            margin-left: 69px;
            width: 300px;
            background-color: #f5f5f5;
            border-color: #d9d9d9;
            color: white;
            height: 40px;
            color: rgba(0, 0, 0, .25);
        }

        #message {
            position: absolute;
            top: 11px;
            font-size: 14px;
            color: #222;
            line-height: 18px;
            width: 70px;
        }
    </style>
</head>
<body>
<header>
    <div class="container">
        <!--前-->
        <ul class="nav nav-pills navbar-nav" id="ul">
            <li class="span"><a href="new_file.html">
                <span class="iconfont icon-bilibilidonghua"></span>
            </a></li>
            <li><a href="#">主站</a></li>
            <li><a href="#">游戏中心</a></li>
            <li><a href="#">直播</a></li>
            <li><a href="#">会员购</a></li>
            <li><a href="#">漫画</a></li>
            <li><a href="#">赛事</a></li>
            <li><a href="#">BML</a></li>
            <li><a href="#">
                <span id="span" class="glyphicon glyphicon-phone"></span>
                下载APP</a></li>

        </ul>

        <!-- 搜索框-->
        <form class="navbar-form  navbar-left" action="" method="post">
            <div class="form-group">
                <input type="text" id="sc" class="form-control" placeholder="请输入要找的类容"/>
            </div>
            <div class="form-group">
                <button id="button" class="btn btn-link" style="outline: none;border: none;">
                    <span class="glyphicon glyphicon-search"></span>
                </button>
            </div>
        </form>
        <!--后-->
        <div class="nav navbar-nav navbar-left" id="img">
            <a href="#">
                <img src="img/akari.jpg" style="height: 32px;"/>
            </a>
        </div>
        <ul class="nav navbar-nav navbar-left" id="ul">
            <li><a href="#">动态</a></li>
            <li><a href="#">历史</a></li>
            <li><a href="#">常做中心</a></li>
            <li id="li">
                <a href="#" id="a" style="color: white;">投稿</a>
            </li>
        </ul>
        <!---->
    </div>
</header>
<!---->
<div style="margin-top: -5px;">
    <div style="height: 90px;background: #00a0d8;">
        <div class="container">
            <img src="img/rl_top.35edfde.png"/>
        </div>
    </div>
    <div style="height:650px;background: white;">
        <div class="container">
            <div class="row">
                <div class="col-md-3" style="margin-top: 30px;">
                    <span style="font-weight: 600;">登录</span>
                    &nbsp;&nbsp;>&nbsp;&nbsp;
                    <span style="color: ;">忘记密码</span>
                </div>
            </div>
            <div class="row">
                <div class="col-md-2 col-md-offset-3" style="margin-top: 30px;">
                    <div style="border: 2px solid #00a1d6;color: #00a1d6;width: 24px;height: 24px;border-radius:50% ;">
                        <span style="margin-left: 6px;">1</span>
                    </div>
                </div>
                <div class="col-md-2" style="margin-top: 32px;margin-left: -159px;">
                    <span style="color:#00a1d6;font-size: 16px;">确认密码</span>
                    <div style="border: 2px solid #e5e9ef;width: 64px;margin-top: -13px;margin-left: 76px;"></div>
                </div>
                <!---->
                <div class="col-md-2 col-md-offset-2" style="margin-top: 30px;margin-left: -29px;">
                    <div style="border: 2px solid  #f25d8e;color:  #f25d8e;width: 24px;height: 24px;border-radius:50% ;">
                        <span style="margin-left: 6px;">2</span>
                    </div>
                </div>
                <div class="col-md-2" style="margin-top: 32px;margin-left: -159px;">
                    <span style="color: #f25d8e;font-size: 16px;">重置密码</span>
                    <div style="border: 2px solid #e5e9ef;width: 64px;margin-top: -13px;margin-left: 76px;"></div>
                </div>
                <!---->
                <div class="col-md-2 col-md-offset-2" style="margin-top: 30px;margin-left: -29px;">
                    <div style="border: 2px solid #99a2aa;color: #99a2aa;width: 24px;height: 24px;border-radius:50% ;">
                        <span style="margin-left: 6px;">3</span>
                    </div>
                </div>
                <div class="col-md-2" style="margin-top: 32px;margin-left: -159px;">
                    <span style="color:#99a2aa;font-size: 16px;">重置成功</span>
                </div>
            </div>
            <!--修改框-->
            <div id="UpdatePasswordApp">
                <div class="container">
                    <form action="" method="post">
                        <div class="col-md-12 col-md-offset-3" style="margin-top: 70px;">
                            <!--新密码-->
                            <div class="form-group" id="box">
                                <span id="message" class="form-group-title">新密码：</span>
                                <input v-model="xinmima" type="password" id="tel pwd1" autocomplete="off" placeholder="新密码：6～16位字符，区分大小写"
                                       maxlength="16" class="form-control sc2">
                                <p></p>
                            </div>
                            <!---->
                            <!--重复密码-->
                            <div class="form-group" style="margin-top: 30px;">
                                <span class="form-group-title" style="position: absolute;margin-top: 8px;">确认密码：</span>
                                <input onblur="aaa()" v-model="jiumima" type="repassword" id="pwd2" οnkeyup="validate()" autocomplete="off"
                                       placeholder="请输入确认密码" maxlength="16" class="form-control sc2"> <span style="color: red;" id="tishi"></span>

                            </div>
                            <!---->
                            <!--手机号-->
                            <div class="form-group" style="margin-top: 40px;">
                                <span class="form-group-title" style="position: absolute;margin-top: 1px;">手机：</span>
                                <div class="sc2"><p class="mail-text float-left"><span id="oooo"></span>********</p>
                                    <a href="/blibli_loginphone.html" @click="phone()"
                                       style="float: right;margin-top:-30px;">修改</a>
                                </div>
                            </div>
                            <!---->
                            <!--验证码-->
                            <div class="form-group" style="margin-top: 20px;">
                                <span class="form-group-title" style="position: absolute;margin-top: 8px;">验证：</span>
                                <input type="text" id="code" autocomplete="off" placeholder="请输入短信/邮件验证码"
                                       class="form-control sc3">
                                <br/>
                                <!--<button id="fasong" type="button" class="btn btn-success"-->
                                        <!--style="position: absolute;margin-left: 276px;margin-top: -36px;">发送验证码-->
                                <!--</button>-->
                               &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input class="btn btn-success" type="button" value="发送验证码" id="fasong">
                            </div>
                            <!---->
                            <!--确认按钮-->
                            <div class="form-group" style="margin-top: 40px;">
                                <button id="btnaaa" type="button" class="btn button2">
                                    <span>确认修改</span>
                                </button>
                            </div>
                        </div>
                        <!---->
                    </form>
                </div>
            </div>
            <!---->
            <!--footer-->
        </div>
    </div>
</div>
<footer>
    <div class="foot_top clearfix">
        <div class="bilibili">
            <p>bilibili</p>
            <div class="about clearfix">
                <ul>
                    <li><a href="###">关于我们</a></li>
                    <li><a href="###">联系我们</a></li>
                </ul>
                <ul>
                    <li><a href="###">友情链接</a></li>
                    <li><a href="###">加入我们</a></li>
                </ul>
                <ul>
                    <li><a href="###">哔哩哔哩周边</a></li>
                    <li><a href="###">官方认证</a></li>
                </ul>
            </div>
        </div>
        <div class="fast_link">
            <p>传送门</p>
            <div class="about clearfix">
                <ul>
                    <li><a href="###">帮助中心</a></li>
                    <li><a href="###">侵权申诉</a></li>
                    <li><a href="###">用户反馈论坛</a></li>
                </ul>
                <ul>
                    <li><a href="###">高级弹幕</a></li>
                    <li><a href="###">分院帽计划</a></li>
                    <li><a href="###">壁纸站</a></li>
                </ul>
                <ul>
                    <li><a href="###">活动专题页</a></li>
                    <li><a href="###">活动中心</a></li>
                    <li><a href="###">名人堂</a></li>
                </ul>
            </div>
        </div>
        <div class="focus clearfix">
            <a href="###">
                <dl>
                    <dt class="focus_pic phone"></dt>
                    <dt class="code_pic phone_code"></dt>
                    <dd class="focus_pro">手机端下载</dd>
                </dl>
            </a>
            <a href="###">
                <dl>
                    <dt class="focus_pic sina"></dt>
                    <dt class="code_pic sina_code"></dt>
                    <dd class="focus_pro">新浪微博</dd>
                </dl>
            </a>
            <a href="###">
                <dl>
                    <dt class="focus_pic official"></dt>
                    <dt class="code_pic wechat_code"></dt>
                    <dd class="focus_pro">官方微信</dd>
                </dl>
            </a>
        </div>
    </div>
    <div class="foot_bottom clearfix">
        <div class="cooper"><img src="img/index/cooper.png" alt=""></div>
        <div class="foot_info">
            <p>广播电视节目制作经营许可证：（沪）字第1248号 | 网络文化经营许可证：沪网文[2013]0480-056号 | 信息网络传播视听节目许可证：0910417 |
                互联网ICP备案：沪ICP备13002172号-3 沪ICP证：沪B2-20100043 | 违法不良信息举报邮箱：help@bilibili.com |
                违法不良信息举报电话：4000233233转3</p>
            <p>网上有害信息举报专区： <a href="###">中国互联网违法和不良信息举报中心</a> | <a href="###">上海互联网举报中心</a> | <a href="###">12318
                全国文化市场举报网站</a></p>
        </div>
    </div>
</footer>
<!---->
</body>
<script>
    var vm = new Vue({
        el: "#UpdatePasswordApp",
        data: {
            xinmima:"",
            jiumima:"",
            phone: JSON.parse(sessionStorage.getItem("passwordUser"))
        },
        methods:{
            updatePassword:function () {
                axios.get("/login", {
                    params: {
                        phone: this.phone,
                        password: this.password
                    }
                }).then(res => {
                    if (res.data.msg == null) {
                        alert("密码或手机号错误")
                    } else {
                        var a = res.data;
                        sessionStorage.setItem("user",JSON.stringify(a));
                        location.href = "/index.html"
                    }
                })
            }
        },
        mounted(){
            var shoujihao = this.phone.user.phone;
            var shoujihaoa = shoujihao.substring(0, 3)
            var qwer = window.document.getElementById("oooo");
            qwer.innerText=shoujihaoa;
        }
    });
</script>

<script type="text/javascript">
    var xinmima = window.document.getElementById("tel pwd1");
    var jiumima = window.document.getElementById("pwd2")
    var tishi = window.document.getElementById("tishi");
    function aaa() {
        if(xinmima.value == jiumima.value){
            tishi.innerText="";
        }else{
            tishi.innerText="俩次输入密码不一致！";
        }
    }

    $(function () {
        var yanzhengma;
        var aaa = JSON.parse(sessionStorage.getItem("passwordUser"));
        var phone = aaa.user.phone;
        var idd = JSON.parse(sessionStorage.getItem("passwordUser"));
        var userid = idd.user.id;
        $('#fasong').click(function () {
            isStop = setInterval("time()",1000);
            $('#fasong').attr("disabled",true);
            $.getJSON("http://localhost:8080/biu",{phone:phone,},function (result) {
                if(result.code != null){
                    yanzhengma=result.code;
                }else{
                    alert(result.msg);
                }
            })
        });
        $("#btnaaa").click(function () {
            var code = $("#code").val();
            if(code==''){
                alert("验证码不能为空");
                return;
            }
            var password = $("#pwd2").val();
            if(code == yanzhengma){
                $.getJSON("updatePassword",{password:password,userid:userid},function (result) {
                    if(result.msg =="ok"){
                        window.location.href="/blibli_loginGOlogin.html";
                    }else{
                        alert("验证码错误");
                    }
                });
            }
        });
    });
    var sec = 30;
    var isStop = 0;
    function time() {
        sec--;
        if(sec==0){
            $('#fasong').val("可以再次发送验证码")
            $('#fasong').removeAttr("disabled");
            sec = 30;
            clearInterval(isStop);
        }else{
            $('#fasong').val(sec+"S后可以重新发送")
        }
    }
</script>
</html>
